<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/blitzer/jquery-ui.min.css"/>


<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
  <script src="/js/jquery.ajaxupload.js"></script>
  <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<![endif]-->
  <script type="text/javascript">
	$(window).ready(function(){
		$('#inputDate').datepicker({
			dateFormat: 'yy-mm-dd',
		});
	});
  </script>
  <script type="text/javascript">
	jQuery(function ($) {
        // Set fieldname
        $.ajaxUploadSettings.name = 'uploads[]';
        // Set promptzone
        $('#outside a').ajaxUploadPrompt({
        	method : 'POST',
        	data: {"photo": 'outside'},
		    processData: false,
		    contentType: 'application/json',
	        url : '/contact/upload',
	        beforeSend : function () {
	        },
	        onprogress : function (e) {
	        },
	        error : function () {
	        },
	        success : function (data) {
		        data = $.parseJSON(data);
		        $('#outside').find('input').val(data['filename']);
		        $('#outside').find('img').attr('src', data['file']);
	        }
        });
        $('#before a').ajaxUploadPrompt({
        	method : 'POST',
        	data: {"photo": 'before'},
		    processData: false,
		    contentType: 'application/json',
	        url : '/contact/upload',
	        beforeSend : function () {
	        },
	        onprogress : function (e) {
	        },
	        error : function () {
	        },
	        success : function (data) {
		        data = $.parseJSON(data);
		        $('#before').find('input').val(data['filename']);
		        $('#before').find('img').attr('src', data['file']);
	        }
        });
        $('#after a').ajaxUploadPrompt({
        	method : 'POST',
        	data: {"photo": 'after'},
		    processData: false,
		    contentType: 'application/json',
	        url : '/contact/upload',
	        beforeSend : function () {
	        },
	        onprogress : function (e) {
	        },
	        error : function () {
	        },
	        success : function (data) {
		        data = $.parseJSON(data);
		        $('#after').find('input').val(data['filename']);
		        $('#after').find('img').attr('src', data['file']);
	        }
        });
        $('#display a').ajaxUploadPrompt({
        	method : 'POST',
        	data: {"photo": 'display'},
		    processData: false,
		    contentType: 'application/json',
	        url : '/contact/upload',
	        beforeSend : function () {
	        },
	        onprogress : function (e) {
	        },
	        error : function () {
	        },
	        success : function (data) {
		        data = $.parseJSON(data);
		        $('#display').find('input').val(data['filename']);
		        $('#display').find('img').attr('src', data['file']);
	        }
        });
        $('#optional a').ajaxUploadPrompt({
        	method : 'POST',
        	data: {"photo": 'optional'},
		    processData: false,
		    contentType: 'application/json',
	        url : '/contact/upload',
	        beforeSend : function () {
	        },
	        onprogress : function (e) {
	        },
	        error : function () {
	        },
	        success : function (data) {
		        data = $.parseJSON(data);
		        $('#optional').find('input').val(data['filename']);
		        $('#optional').find('img').attr('src', data['file']);
	        }
        });
        $('#staff a').ajaxUploadPrompt({
        	method : 'POST',
        	data: {"photo": 'staff'},
		    processData: false,
		    contentType: 'application/json',
	        url : '/contact/upload',
	        beforeSend : function () {
	        },
	        onprogress : function (e) {
	        },
	        error : function () {
	        },
	        success : function (data) {
		        data = $.parseJSON(data);
		        $('#staff').find('input').val(data['filename']);
		        $('#staff').find('img').attr('src', data['file']);
	        }
        });
	});
  </script>
 <script type="text/javascript">
	$(window).ready(function(){
		$('#continue').on('click', function(){
			$('#step1').hide();
			$.ajax({
                type: "POST",
                url: "/orders/ajax",
                data: {
                    template_id: $('#inputTemplate').val(),
                },
                dataType: "HTML",
                success: function(data){
                    $('#products').html(data);
                    $('#step2').removeClass('hidden');
                }
            });
		});
	});
</script>
<h1>Create an order</h1>
<p>&nbsp;</p>
<form class="form" action="" role="form" method="POST">
	<div id="step1">
		<div class="col-lg-12">
			<div class="row">
				<h2>Step 1. Choose your order form</h2>
				<p>&nbsp;</p>
				<div class="col-lg-5 col-sm-12">
					<div class="form-group">
						<label class="control-label" for="inputName">Store Name</label>
						<div class="controls">
							<input type="hidden" name="data[store_id]" value="<?php echo $distributor->id?>"/>
							<input class="form-control" name="data[store_title]" type="text" id="inputName" value="<?php echo $distributor->title;?>" disabled="disabled">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label" for="inputTemplate">Order Form</label>
						<div class="controls">
							<select class="form-control" name="data[template_id]" id="inputTemplate">
								<?php foreach ($templates as $template){?>
									<option value="<?php echo $template->id?>" selected="selected"><?php echo $template->title?></option>
								<?php }?>
							</select>
					  <a href="/orders/list">+ Add/Edit</a></div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-12" style="margin-bottom: 20px; margin-top: 15px;">
			<a href="#" id="continue" class="btn btn-primary">Continue</a>
		</div>
	</div>
	<div id="step2" class="hidden">
		<div class="col-lg-12">
			<h2>Step 2. Record all products you sell, giveaway and replace</h2>
			<div id="products">

			</div>
			<button type="submit" class="btn btn-success">View Order</button>
		</div>
	</div>
</form>